<template>
    <div class="vue-table-container">
        <slot name="search">
            <div class="row form-horizontal">
                <div class="col-sm-12 ">
                    <form class="form-inline">
                        <div class="col-xs-8 form-group">
                            <input style="width: 100%" placeholder="请输入关键词" class="input-sm form-control" name="keyword" type="text"
                                   v-model="queryString" v-on:keyup.enter="search">
                            <!--<span class="input-group-btn">-->
                          <!---->
                        <!--</span>-->
                        </div>
                        <div class="col-xs-4 input-group">
                            <label class="sr-only">请选择学期</label>
                        <select style="width: 100%"v-model="selectString" class="input-sm form-control" name="keyword">
                            <option value="" disabled selected>请选择</option>
                            <option v-for="(item,key) in options" :value="getOptionValue(key,item)">
                                {{ getOptionLabel(key, item) }}
                            </option>
                        </select>
                            <span class="input-group-btn">
                            <button type="button" class="btn btn-sm btn-primary" @click="search">检索</button>
                                </span>
                        </div>
                    </form>
                </div>


            </div>
        </slot>
        <div class="table-container">
            <table class="table table-hover">
                <thead>
                <slot name="header"></slot>
                </thead>

                <tbody>
                <slot name="tbody" v-for="item in dataSource.items" :item="item"></slot>
                </tbody>
            </table>
        </div>
        <div class="widget-toolbox padding-10 clearfix">
            <pagination :page-count="dataSource.pageCount"
                        :total="dataSource.total"
                        :current-page="dataSource.currentPage" @goPage="goPage"></pagination>
        </div>
    </div>
</template>
<style scoped>
    .form-control {

        font-size: 11px;
    }
</style>
<script>
    export default {
        props: {
            dataSource: {
                type: Object,
                default: []
            },
            tableClass: {
                type: String,
                default: ''
            },
            select:{
                type: String,
                default: ''
            },
            options: {
                type: [Array, Object],
                default: []
            },
            optionsValue: {
                type: String,
                default: 'value'
            },
            optionsLabel: {
                type: String,
                default: 'label'
            },
        },
        data: function () {
            return {
                queryString: '',
                selectString: ''
            }
        },
        methods: {
            search: function () {
                let self = this;
                self.dataSource.fetch({query: self.queryString, select: self.selectString});
            },
            goPage: function (event) {
                let self = this;
                self.dataSource.fetch({page: event.page, query: self.queryString, select: self.selectString});
            },
            getOptionLabel(key, item) {
                if (typeof item[this.optionsLabel] == "String") {
                    return item[this.optionsLabel];
                } else {
                    return item;
                }
            },
            getOptionValue(key, item) {
                if (typeof item[this.optionsValue] == "String") {
                    return item[this.optionsValue];
                } else {
                    return key;
                }
            }
        }
    }
</script>
<style>
    .input-group{
        margin-left: 15px;
    }
</style>
